<!-- 运费弹框 -->
<template>
	<view class="">
		<u-popup class="u-pop" :show="true" :round="10" mode="center" :closeOnClickOverlay="false">
			<view class="popup-view">
				<view class="form-view m-b-40 m-t-40">
					<view class="form-item">
						<view class="label">
							计算方式：
						</view>
						<view class="value flex">
							<u-radio-group v-model="freightParams.value">
								<u-radio shape="circle" label="按公斤" size="14" class="m-r-20" name='1' labelSize="14px" labelColor="#333"></u-radio>
								<u-radio shape="circle" label="按匹数" size="14" name="2" labelSize="14px" labelColor="#333"></u-radio>
							</u-radio-group>
						</view>
					</view>
					<view class="form-item">
						<view class="label">
							数量：
						</view>
						<view class="value flex">
							<u--input border="surround" fontSize="14"
								v-model="freightParams.number"
							></u--input>
							<u-icon name="reload" size="20" class="p-l-20" color="#666" @click="onReloadNum"></u-icon>
						</view>
					</view>
					<view class="form-item">
						<view class="label">
							价格/元：
						</view>
						<view class="value flex">
							<u--input border="surround"
								v-model="freightParams.price"
							></u--input>
							<u-icon name="reload" size="20" class="p-l-20" color="#666" @click="onReloadPrice"></u-icon>
						</view>
					</view>
					<view class="form-item">
						<view class="label">
							总计：
						</view>
						<view class="value">
							0元
						</view>
					</view>
				</view>
				<view class="bot-view flex flex-sa">
					<view class="btn" @click="onCencal">
						取消
					</view>
					<view class="btn" @click="onConfirm">
						自动计算
					</view>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	export default {
		name: '',
		data() {
			return {
				radiolist: [{
					label: '按公斤'
				}],
				freightParams: {
					value:'',
					number: '',
					price: ''
				}
			}
		},
		methods: {
			onCencal() {
				this.$emit('cancel')
			},
			onConfirm() {
				this.$emit('confirm')
			},
			// 刷新数量
			onReloadNum() {
				uni.showToast({
					title:'请选择计价方式',
					icon: 'none'
				})
			},
			// 刷新价格
			onReloadPrice() {
				uni.showToast({
					title: '请选择货运',
					icon: 'none'
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.popup-view {
		.form-view {
			.form-item {
				margin-bottom: 20rpx;
				.label {
					flex: inherit;
					width: 140rpx;
					color: #999;
				}
			}
		}
	}   
</style>